<template>
  <div class="example-wrapper">
    <h2>iview 自带组件跟随主题色示例</h2>
    <Form :model="formItem" :label-width="80">
      <FormItem label="输入框">
        <Input v-model="formItem.input" placeholder="请输入内容……"></Input>
      </FormItem>
      <FormItem label="选择器">
        <Select v-model="formItem.select">
          <Option value="beijing">北京</Option>
          <Option value="shanghai">上海</Option>
          <Option value="shenzhen">深圳</Option>
        </Select>
      </FormItem>
      <FormItem label="日期控件">
        <Row>
          <Col span="11">
            <DatePicker type="date" placeholder="Select date" v-model="formItem.date"></DatePicker>
          </Col>
          <Col span="2" style="text-align: center">-</Col>
          <Col span="11">
            <TimePicker type="time" placeholder="Select time" v-model="formItem.time"></TimePicker>
          </Col>
        </Row>
      </FormItem>
      <FormItem label="单选框">
        <RadioGroup v-model="formItem.radio">
          <Radio label="男">男</Radio>
          <Radio label="女">女</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="多选框">
        <CheckboxGroup v-model="formItem.checkbox">
          <Checkbox label="吃饭"></Checkbox>
          <Checkbox label="睡觉"></Checkbox>
          <Checkbox label="跑步"></Checkbox>
          <Checkbox label="看电影"></Checkbox>
        </CheckboxGroup>
      </FormItem>
      <FormItem label="开关">
        <i-switch v-model="formItem.switch" size="large">
          <span slot="open">On</span>
          <span slot="close">Off</span>
        </i-switch>
      </FormItem>
      <FormItem label="滑块">
        <Slider v-model="formItem.slider" range></Slider>
      </FormItem>
      <FormItem>
        <Button type="primary">提交</Button>
        <Button style="margin-left: 8px">取消</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>
export default {
  name: 'Example',
  data() {
    return {
      formItem: {
        input: '',
        select: 'beijing',
        radio: '男',
        checkbox: ['吃饭', '跑步'],
        switch: true,
        date: '',
        time: '',
        slider: [20, 50],
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/theme.less';

.example-wrapper {
  border-radius: 8px;
  border: 1px solid @primary-color;
  padding: 16px;
}
</style>